<template>
  <view class="container">
    <view class="status-tabs">
      <view 
        v-for="(tab, index) in categoryTabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentCategoryId === tab.value }"
        @click="onCategoryChange(tab.value)"
      >
        {{ tab.label }}
      </view>
    </view>
    
    <search-box
      v-model="keyword"
      placeholder="搜索成果标题"
      @search="onSearch"
      @clear="onSearchClear"
      :show-action="true"
    ></search-box>
    
    <view class="achievement-list">
      <template v-if="achievementList.length > 0">
        <view 
          v-for="item in achievementList" 
          :key="item.id"
          class="achievement-item"
          @click="goDetail(item.id)"
        >
          <view class="achievement-content">
            <view class="achievement-title">{{ item.title }}</view>
            <view class="achievement-desc" v-if="item.description">{{ item.description }}</view>
            
            <view class="achievement-info">
              <view class="achievement-tags" v-if="item.tags && parseTags(item.tags).length">
                <u-tag 
                  v-for="(tag, tagIndex) in parseTags(item.tags)" 
                  :key="tagIndex" 
                  :text="tag" 
                  plain 
                  size="mini"
                ></u-tag>
              </view>
              <text class="achievement-time">{{ formatDate(item.completion_date || item.create_time) }}</text>
            </view>
          </view>
          <view class="achievement-action">
            <u-icon name="arrow-right" color="#c0c4cc" size="28"></u-icon>
          </view>
        </view>
        
        <view class="load-more" v-if="hasMore">
          <u-loadmore 
            status="loading" 
            @loadmore="loadMore" 
            :icon="true"
          ></u-loadmore>
        </view>
        
        <view class="no-more" v-else>
          <u-loadmore status="nomore"></u-loadmore>
        </view>
      </template>
      
      <view class="empty-list" v-else>
        <u-empty 
          mode="data" 
          text="暂无成果记录" 
          margin-top="200"
        ></u-empty>
      </view>
    </view>
    
    <view class="add-button">
      <u-button 
        type="primary" 
        shape="circle"
        icon="plus"
        @click="goAdd"
      ></u-button>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { formatDate } from '@/utils/date'
import SearchBox from '@/components/common/SearchBox.vue'

export default {
  components: {
    SearchBox
  },
  data() {
    return {
      currentCategoryId: -1,
      keyword: '',
      page: 1,
      limit: 10,
      categoryTabs: [
        { label: '全部', value: -1 }
      ],
      isLoading: false
    }
  },
  computed: {
    ...mapGetters({
      achievementList: 'achievement/achievementList',
      total: 'achievement/total',
      loading: 'achievement/loading',
      achievementCategories: 'category/achievementCategories'
    }),
    hasMore() {
      return this.achievementList.length < this.total
    }
  },
  onLoad() {
    this.initData()
  },
  onPullDownRefresh() {
    this.refreshList()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  onReachBottom() {
    if (this.hasMore && !this.isLoading) {
      this.loadMore()
    }
  },
  methods: {
    ...mapActions('achievement', ['getAchievementList', 'loadMore', 'setFilters', 'resetFilters']),
    ...mapActions('category', ['getCategoryList']),
    formatDate,
    
    // 初始化数据
    async initData() {
      this.isLoading = true
      
      try {
        // 获取成果分类
        await this.getCategoryList(3) // 类型为3表示成果分类
        this.initCategoryTabs()
        
        // 获取成果列表
        await this.setFilters({
          categoryId: this.currentCategoryId,
          keyword: this.keyword
        })
      } catch (error) {
        console.error('加载数据失败', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },
    
    // 初始化分类选项卡
    initCategoryTabs() {
      this.categoryTabs = [
        { label: '全部', value: -1 }
      ]
      
      if (this.achievementCategories && this.achievementCategories.length > 0) {
        this.achievementCategories.forEach(category => {
          this.categoryTabs.push({
            label: category.name,
            value: category.id
          })
        })
      }
    },
    
    // 刷新列表
    refreshList() {
      this.page = 1
      this.resetFilters()
    },
    
    // 加载更多
    async loadMore() {
      if (this.isLoading) return
      
      this.isLoading = true
      this.page += 1
      
      try {
        await this.loadMore()
      } catch (error) {
        console.error('加载更多失败', error)
        this.page -= 1 // 恢复页码
      } finally {
        this.isLoading = false
      }
    },
    
    // 分类切换
    onCategoryChange(categoryId) {
      if (this.currentCategoryId === categoryId) return
      
      this.currentCategoryId = categoryId
      this.page = 1
      this.setFilters({ categoryId })
    },
    
    // 搜索
    onSearch() {
      this.page = 1
      this.setFilters({ keyword: this.keyword })
    },
    
    // 清除搜索
    onSearchClear() {
      this.keyword = ''
      this.page = 1
      this.setFilters({ keyword: '' })
    },
    
    // 解析标签
    parseTags(tags) {
      if (!tags) return []
      try {
        if (typeof tags === 'string') {
          return JSON.parse(tags)
        }
        return tags
      } catch (error) {
        return []
      }
    },
    
    // 跳转到详情页
    goDetail(id) {
      uni.navigateTo({
        url: `/pages/achievement/detail?id=${id}`
      })
    },
    
    // 跳转到新增页
    goAdd() {
      uni.navigateTo({
        url: '/pages/achievement/edit'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 120rpx;
}

.status-tabs {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 10;
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: none;
}

.tab-item {
  padding: 10rpx 20rpx;
  font-size: 28rpx;
  color: #606266;
  border-radius: 8rpx;
  position: relative;
  margin-right: 20rpx;
}

.tab-item.active {
  color: #2979ff;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background-color: #2979ff;
  border-radius: 3rpx;
}

.achievement-list {
  padding: 20rpx;
}

.achievement-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.achievement-content {
  flex: 1;
}

.achievement-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10rpx;
}

.achievement-desc {
  font-size: 26rpx;
  color: #606266;
  margin-bottom: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.achievement-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.achievement-tags {
  display: flex;
  flex-wrap: wrap;
}

.u-tag {
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.achievement-time {
  font-size: 24rpx;
  color: #909399;
}

.achievement-action {
  margin-left: 20rpx;
}

.empty-list {
  padding: 100rpx 0;
}

.load-more, .no-more {
  padding: 30rpx 0;
}

.add-button {
  position: fixed;
  right: 40rpx;
  bottom: 40rpx;
  z-index: 100;
}
</style> 